import  React,{Component} from 'react'
import {Pagination} from "antd";
import '../../../../static/css/main.less'
import '../../../../static/css/article.less'
import { Form, Input, Button,Select , Checkbox  } from 'antd';

const { Option } = Select;

function handleChange(value) {
    console.log(`selected ${value}`);
}

function onChange(e) {
    console.log(`checked = ${e.target.checked}`);
}

class ArticleList extends Component{
    constructor(props) {
        super(props);
        this.state={
            list:[
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'121'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'122'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'123'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'124'},
            ],
            currentPage:1,
            total:50,
            search:{
                filterStr:'',
                type:'12'
            }
        }
        this.goView = this.goView.bind(this)
    }
    componentDidMount() {
        document.title= '文章中心'
    }
    onfilterStrChange = filterStr =>{
        console.log(filterStr)
        this.setState({
            search:{
                filterStr:filterStr
            }
        })
        console.log(this.state.search)
    }

    pageChange = page =>{
        console.log(page)
        this.setState({
            currentPage:page
        })

    }
    goView(no){
        var url1 = '/article/view/'+no
        var win = window.open(url1,'_blank')
        win.focus()
    }


    render() {
        var items = this.state.list
        return　(
            <>
                <div className='content'>
                    <div className='filter'>
                        <Form>
                        <Form.Item
                            name="search"
                            label="搜索关键词"
                            // rules={[
                            //     {
                            //         validator: checkPrice,
                            //     },
                            // ]}
                        >
                              <span>
                            <Input
                                type="text"
                                value={this.state.filterStr}
                                onChange={this.onfilterStrChange}
                                style={{
                                        width: 200,
                                        }}
                            />
                                 <span>    </span>
                            <Select
                                mode="multiple"
                                style={{ width: 300 }}
                                placeholder="选择一个类型或主题"
                                defaultValue={['china']}
                                onChange={handleChange}
                                optionLabelProp="label"
                            >
                                <Option value="china" label="China">
                                    <div className="demo-option-label-item">
                                    <span role="img" aria-label="China">
                                            🇨🇳
                                    </span>
                                        China (中国)
                                    </div>
                                </Option>
                                <Option value="usa" label="USA">
                                    <div className="demo-option-label-item">
                                        <span role="img" aria-label="USA">
                                                🇺🇸
                                        </span>
                                                USA (美国)
                                    </div>
                                </Option>
                                <Option value="japan" label="Japan">
                                    <div className="demo-option-label-item">
                                        <span role="img" aria-label="Japan">
                                                🇯🇵
                                        </span>
                                                Japan (日本)
                                    </div>
                                </Option>
                                <Option value="korea" label="Korea">
                                    <div className="demo-option-label-item">
                                            <span role="img" aria-label="Korea">
                                                    🇰🇷
                                            </span>
                                                    Korea (韩国)
                                        </div>
                                    </Option>
                            </Select>

                        </span>
                        </Form.Item>
                            <Form.Item>
                                <Checkbox onChange={onChange}>按时间排序</Checkbox>
                                <Checkbox onChange={onChange}>按收藏数排序</Checkbox>
                            </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                搜索
                            </Button>
                        </Form.Item>

                    </Form>
                    </div>
                    <div  className='list'>
                        <ul>
                            {
                                items.map((items) =>
                                    <li className='articleItem' key={items.no} onClick={()=> this.goView(items.no)}>
                                            <div className='itemImage'>
                                                <img src={items.image} alt='文章图片' />
                                            </div>
                                            <div className='itemInfo' >
                                                <p className='itemTitle'>{items.title}</p>
                                                <p className='itemType'>{items.author} | {items.type}</p>
                                                <div className='itemInfo2'>
                                                    <p className='double-line'>{items.info}</p>
                                                </div>
                                                <p className='itemDate'>{items.date}</p>
                                            </div>
                                    </li>
                                )
                            }
                            {/*<li className='articleItem'>*/}
                            {/*    <div className='itemImage'>*/}
                            {/*        <img src='#' alt='文章图片' />*/}

                            {/*    </div>*/}
                            {/*    <div className='itemInfo'>*/}
                            {/*        <p className='itemTitle'>文章标题</p>*/}
                            {/*        <p className='itemType'>文章作者 | 文章类型</p>*/}
                            {/*        <div>*/}
                            {/*            <p className='itemInfo2'>文章简介</p>*/}
                            {/*        </div>*/}
                            {/*        <p className='itemDate'>文章发布日期</p>*/}
                            {/*    </div>*/}
                            {/*</li>*/}
                        </ul>
                    </div>
                    <div className='page'>
                        <Pagination current={this.state.currentPage} onChange={this.pageChange} total={this.state.total} />
                    </div>
                </div>


            </>
        )
    }
}


export default ArticleList
